<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
	    
        <script type="text/javascript">

        var chart;
        var chartData = [];
		var newValueAxis;
		var addAxis;
		var removeAxis;

        window.onload = function() {
		 	generateChartData();

			chart = new AmCharts.AmSerialChart();
			chart.pathToImages = "../../amcharts/javascript/images/";
			chart.addListener("dataUpdated", zoom);
			chart.marginTop = 15;
			chart.marginLeft = 110;
			chart.marginRight = 50;
			chart.dataProvider = chartData;
			chart.categoryField = "date";

			chart.categoryAxis.parseDates = true;

			var valAxis1 = new AmCharts.ValueAxis();
			valAxis1.axisColor = "#FF6600";
			valAxis1.axisThickness = 2;
			chart.addValueAxis(valAxis1);

			var graph1 = new AmCharts.AmGraph();
			graph1.valueAxis = valAxis1;
			graph1.valueField = "visits";
			graph1.type = "smoothedLine";
			graph1.bullet = "round";
			graph1.hideBulletsCount = 30;
			chart.addGraph(graph1);

			var valAxis2 = new AmCharts.ValueAxis();
			valAxis2.position = "right";
			valAxis2.axisColor = "#FCD202";
			valAxis2.gridAlpha = 0;
			valAxis2.axisThickness = 2;
			chart.addValueAxis(valAxis2);

			var graph2 = new AmCharts.AmGraph();
			graph2.valueAxis = valAxis2;
			graph2.valueField = "hits";
			graph2.type = "smoothedLine";
			graph2.bullet = "square";
			graph2.hideBulletsCount = 30;
			chart.addGraph(graph2);

			valAxis3 = new AmCharts.ValueAxis();
			valAxis3.offset = 50;
			valAxis3.gridAlpha = 0;
			valAxis3.axisColor = "#B0DE09";
			valAxis3.axisThickness = 2;
			chart.addValueAxis(valAxis3);

			var graph3 = new AmCharts.AmGraph();
			graph3.valueField = "views";
			graph3.bullet = "triangleUp";
			graph3.hideBulletsCount = 30;
			graph3.type = "smoothedLine";
			graph3.valueAxis = valAxis3;
			chart.addGraph(graph3);

			var chartCursor = new AmCharts.ChartCursor();
			chart.addChartCursor(chartCursor);

			var chartScrollbar = new AmCharts.ChartScrollbar();
			chartScrollbar.graph = graph1;
			chart.addChartScrollbar(chartScrollbar);

			chart.write("chartdiv");
		}

		// generate some random data, quite different range
		function generateChartData(){
			var firstDate = new Date();
			firstDate.setDate(firstDate.getDate() - 100);

			for(var i = 0; i < 100; i++){
				var newDate = new Date(firstDate);
				newDate.setDate(newDate.getDate() + i);

				var visits = Math.round(Math.random() * 40) + 100;
				var hits   = Math.round(Math.random() * 80) + 500;
				var views   = Math.round(Math.random() * 6000);

				chartData.push({date:newDate, visits:visits, hits:hits, views:views});
			}
		}

		function zoom(){
			chart.zoomToIndexes(0,10);
		}


	    </script>

    </head>

	<body>
		<div id="chartdiv" style="width: 670px; height: 400px;"></div>
	</body>
</html>